﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>无标题文档</title>
    <meta charset='utf8'/>
       <!--    引入layui的css文件-->
    <link href="/static/layui/css/layui.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/static/admin/css/public.css">
</head>

<body>

<div id="main">
    <a href="{:url('add')}">添加新闻</a>
   <!-- 搜索  -->
    <!-- 根据分类搜索  -->
    <select name="" id="cate_id">
        <option value="">请选择分类</option>
        {volist name="cate" id="v"}
        <option value="{$v.id}">{$v.cate_name}</option>
        {/volist}
    </select>
   <!-- 根据时间筛选 -->
    起始时间： <input type="date" id="start">
    截止时间: <input type="date" id="end">
    <button onclick="search()">搜索</button>
    <table class="layui-hide" id="test" lay-filter="test"></table>

    <script type="text/html" id="picTpl">
        <img src="{{=d.pic_url}}" style="width: 100px;height: 100px" alt="">
    </script>
    
<!--    <script type="text/html" id="toolbarDemo">-->
<!--        <div class="layui-btn-container">-->
<!--            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>-->
<!--            <button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button>-->
<!--            <button class="layui-btn layui-btn-sm" lay-event="isAll">是否全选</button>-->
<!--        </div>-->
<!--    </script>-->
   
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>


</div>
<!--引入jQuery-->
<script src="/static/js/jquery.js"></script>
<!--引入layui.js文件-->
<script src="/static/layui/layui.js"></script>
<script>
     //搜索
     function search(){
         //获取要搜索的分类id
         var cate_id=$('#cate_id').val();
         //获取起始时间和截止时间
         var start=$('#start').val();
         var end=$('#end').val();
         initTable(start,end,cate_id);
     }
     //页面加载时渲染
     search();
    function initTable(start='',end='',cate_id='') {
        layui.use(['table', 'layer'], function () {
            var table = layui.table;
            var layer = layui.layer;
            // 创建渲染实例
            table.render({
                elem: '#test'
                , url: 'newsData'// 数据接口
                ,where:{cate_id,start,end}  //搜索条件
                , toolbar: '#toolbarDemo'
                , defaultToolbar: ['filter', 'exports', 'print', {
                    title: '帮助'
                    , layEvent: 'LAYTABLE_TIPS'
                    , icon: 'layui-icon-tips'
                }]
                , height: 'full-200' // 最大高度减去其他容器已占有的高度差
                , cellMinWidth: 80
                , style: '{height:100px}'
                , totalRow: true // 开启合计行
                , page: true
                , limit: 3   //默认每页显示3条
                , limits: [3, 6, 9, 12, 15] //下拉选项
                , cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    , {field: 'id', fixed: 'left', width: 80, title: 'ID', sort: true}
                    , {field: 'title', width: 250, title: '新闻标题'}
                    , {field: 'pic_url', width: 150, title: '新闻图片', templet: '#picTpl'}
                    , {
                        field: 'cate', width: 120, title: '新闻分类', templet: function (d) {
                            return d.cate.cate_name;
                        }
                    }
                    , {field: 'author', width: 120, title: '编辑'}
                    , {field: 'add_time', title: '发布时间', width: 120}
                    , {fixed: 'right', title: '操作', width: 125, minWidth: 125, toolbar: '#barDemo'}
                ]]
                , done: function () {
                    var id = this.id;
                }
                , error: function (res, msg) {
                    console.log(res, msg)
                }
            });

            //触发单元格工具事件
            table.on('tool(test)', function (obj) { // 双击 toolDouble
                var data = obj.data;
                //console.log(data)
                if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        //数据库删除
                        $.ajax({
                            type: 'delete',
                            url: 'delNew/id/' + data.id,
                            success(res) {
                                if (res.code == 200) {
                                    layer.msg('删除成功', {
                                        icon: 6,
                                        time: 1000
                                    }, function () {
                                        obj.del();
                                        layer.close(index);
                                    });
                                } else {
                                    layer.msg('删除成功', {
                                        icon: 6,
                                        time: 1000
                                    }, function () {
                                        layer.close(index);
                                    });
                                }
                            }
                        })
                    });
                } else if (obj.event === 'edit') {
                    layer.open({
                        title: '新闻编辑',
                        type: 2,
                        area: ['95%', '95%'],
                        content: 'edit?id=' + data.id  //在当前窗口打开其他页面，edit是页面的地址
                    });
                }
            });

            //触发表格复选框选择
            table.on('checkbox(test)', function (obj) {
                console.log(obj)
            });

            //触发表格单选框选择
            table.on('radio(test)', function (obj) {
                console.log(obj)
            });

            // 行单击事件
            table.on('row(test)', function (obj) {
                //console.log(obj);
                //layer.closeAll('tips');
            });
            // 行双击事件
            table.on('rowDouble(test)', function (obj) {
                console.log(obj);
            });

            // 单元格编辑事件
            table.on('edit(test)', function (obj) {
                var field = obj.field //得到字段
                    , value = obj.value //得到修改后的值
                    , data = obj.data; //得到所在行所有键值

                var update = {};
                update[field] = value;
                obj.update(update);
            });
        });
    }
</script>


</body>
</html>
